import React, { useState, useEffect } from "react";
import { Breadcrumb, Button, Table, Space,message, } from "antd";
import "./management.less";
import axios from "axios";
import dayjs from "dayjs"
export default function EventManagement() {
  let [ls, setLs] = useState([]);
  let [delarr,setdelarr] = useState([])
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(
        setdelarr(selectedRowKeys),
      );
    },
  };
  const columns = [
    {
      title: "活动标题",
      dataIndex: "hdbt",
    },
    {
      title: "作者",
      dataIndex: "author",
    },
    {
      title: "发布状态",
      dataIndex: "fbzt",
      render: (_, record) => {
        if (record.fbzt === 0) {
          return "未发布";
        } else if (record.fbzt === 1) {
          return "已发布";
        }
      },
    },
    {
      title: "浏览量",
      dataIndex: "lll",
    },
    {
      title: "发布人",
      dataIndex: "fbr",
    },
    {
      title:"发布时间",
      dataIndex:"fbrq",
      render: (_, record) => {
        return dayjs(record.fbrq).format("YYYY-MM-DD");
      },
    },
    {
      title: "操作",
      dataIndex: "cz",
      render: (_, record) => (
        <Space size="middle">
          <a>详情</a>
          <a onClick={() => del(record._id)}>删除</a>
        </Space>
      ),
    },
  ];
  const [selectionType, setSelectionType] = useState("checkbox");
  let [page, setpage] = useState(1);
  let [pageSize, setpageSize] = useState(8);
  useEffect(() => {
    getEvent();
  }, []);
  let [hdbt, sethdbt] = useState("");
  let getEvent = async () => {
    let {
      data: { code, ls },
    } = await axios.get(`http://localhost:3000/getManagement?hdbt=${hdbt}`);
    if (code === 200) {
      setLs(ls);
    }
  };
  let del = async (id) => {
    let {
      data: { code },
    } = await axios.delete(`http://localhost:3000/delManagement?id=${id}`);
    if (code === 200) {
      message.success("删除成功");
      getEvent();
    }
  };
  let delall = async()=>{
    let {data:{code}} = await axios.post(`http://localhost:3000/delallManagement`,delarr)
    if(code===200){
      message.success("删除成功")
      getEvent()
    }
  }
  return (
    <div className="bigbox">
      <div className="header">
        <div className="header1">
          <Breadcrumb
            items={[
              {
                title: "物业服务",
              },
              {
                title: "活动管理",
              },
            ]}
          />
          <h2>活动管理</h2>
          <hr />

          {/* 头部类型 */}
          <div style={{ height: "70px", lineHeight: "70px" }}>
            <span>活动标题</span>
            <input
              type="text"
              style={{
                width: "240px",
                marginLeft: "30px",
                height: "25px",
                borderRadius: "5px",
              }}
              placeholder="请输入"
              value={hdbt}
              onChange={(e) => sethdbt(e.target.value)}
            />
            <Button
              style={{ marginLeft: "45%", width: "80px", height: "40px" }}
              type="primary"
              onClick={getEvent}
            >
              查询
            </Button>
            <Button
              style={{ marginLeft: "10px", width: "80px", height: "40px" }}
            >
              重置
            </Button>
          </div>
        </div>
      </div>
      <div className="content">
        <div className="content1">
          <p>
            <span>活动列表</span>
            <Button
              style={{ marginLeft: "80%", width: "100px", height: "40px" }}
              onClick={delall}
            >
              批量删除
            </Button>
          </p>
          <Table
            columns={columns}
            dataSource={ls}
            rowSelection={{
              type: selectionType,
              ...rowSelection,
            }}
            pagination={{
              current: page,
              pageSize: pageSize,
              total: ls.length,
              onChange: (page, pageSize) => {
                setpage(page);
                setpageSize(pageSize);
              },
              pageSizeOptions: [8, 10, 15, 20, 30],
              showSizeChanger: true,
              showQuickJumper: true,
            }}
            rowKey={"_id"}
          />
        </div>
      </div>
    </div>
  );
}
